<template>
  <a-modal
    width="500px"
    v-drag
    :destroyOnClose="true"
    :maskClosable="false"
    :visible="visible"
    :bodyStyle="{ padding: '1px' }"
    :title="title"
    @cancel="cancel"
  >
    <a-spin :spinning="spinning">
      <a-form-model
        ref="form"
        :model="form"
        :rules="rules"
        :label-col="config.labelCol"
        :wrapper-col="config.wrapperCol"
      >
        <a-row>
          <a-col>
            <a-form-model-item label="旧密码" prop="oldPassword">
              <a-input
                v-model="form.oldPassword"
                type="password"
                placeholder="旧密码"
              ></a-input>
            </a-form-model-item>
            <a-form-model-item has-feedback label="新密码" prop="newPassword">
              <a-input
                v-model="form.newPassword"
                type="password"
                placeholder="新密码"
                autocomplete="off"
              />
            </a-form-model-item>
            <a-form-model-item
              has-feedback
              label="确认新密码"
              prop="confirmNewPassword"
            >
              <a-input
                v-model="form.confirmNewPassword"
                type="password"
                placeholder="确认新密码"
                autocomplete="off"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>

    <template slot="footer">
      <a-space>
        <a-button key="back" @click="cancel" :disabled="loading"
          ><a-icon type="close" />取消</a-button
        >
        <a-button key="submit" @click="save" type="primary" :loading="loading"
          ><a-icon type="save" />提交</a-button
        >
      </a-space>
    </template>
  </a-modal>
</template>

<script>
import { mapGetters } from "vuex";
import { changepassword } from "@/services/system/user/changepwd";

export default {
  name: "changepassword",

  data() {
    return {
      config: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 },
      },
      form: {
        oldPassword: null,
        newPassword: null,
        confirmNewPassword: null,
        id: "",
      },
      rules: {
        oldPassword: [
          {
            required: true,
            message: "请输入旧密码",
            trigger: "change",
          },
        ],
        newPassword: [
          {
            required: true,
            message: "请输入新密码",
            trigger: "blur",
          },
        ],
        confirmNewPassword: [
          {
            required: true,
            message: "请输入确认新密码",
            trigger: "blur",
          },
        ],
      },

      loading: false,
      spinning: false,
    };
  },

  computed: {
    ...mapGetters("account", ["user"]),
  },

  created() {
    this.form.id = this.user.userId;
  },

  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
    },
  },

  methods: {
    /**
     * 重置密码保存
     */
    save() {
      let that = this;
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (that.form.newPassword != that.form.confirmNewPassword) {
            that.$message.error("新密码与确认新密码不一致");
            return;
          }
          that.loading = true;
          that.spinning = true;
          that.$message.loading("正在修改密码");
          changepassword(that.form).then((result) => {
            that.$message.destroy();
            if (result.code === that.eipResultCode.success) {
              that.$message.success(result.msg);
              that.cancel();
            } else {
              that.$message.error(result.msg);
            }
            that.loading = false;
            that.spinning = false;
          });
        } else {
          return false;
        }
      });
    },

    /**
     * 取消
     */
    cancel() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less"></style>
